<template>
    <fieldset>
        <legend>reactive</legend>
        <h1>{{msg}}</h1>
        <h1>{{ob}}</h1>
        <h1>{{ob2}}</h1>
        <h1>{{num}}</h1>
        <h2>{{str}}</h2>
    </fieldset>
</template>

<script setup>
import{ref,reactive} from "vue"
// reactive作用，将对象变成响应式
let msg = ref("初始值")
// ref也可以将对象变成响应式
let ob = ref({name:"李雷"})


let ob2 = reactive({name:"韩梅梅"})


// 修改ref和修改reactive

// setTimeout(()=>{
//     // 修改ref，需要.value
//     ob.value.name='ikun'
//     // 修改reactive,不需要.value
//     ob2.name="蔡徐坤"
// },2000)

let num = reactive(30)
let str = ref('李雷123')
setTimeout(()=>{
    // num=40
    str.value='霍华德'
},2000)
// 总结：
// 1.ref修改的时候需要.value reactive不要 
// 2.reactive只能响应对象，ref基本数据类型和对象都能响应

</script>